import React, { Component } from 'react';
import './index.less';
import Main from './images/main.jpg';
// import axios from '@/components/service/request';     //接口
import FooterPage from '@components/layout/footerPage';
import { Link,Switch,Route,BrowserRouter} from "react-router-dom";
import {NotificationTwoTone , ScheduleTwoTone,FileWordTwoTone ,RocketTwoTone,RightCircleTwoTone,DownloadOutlined, FolderOpenTwoTone } from '@ant-design/icons';
import axios from 'axios';
import { log } from '@craco/craco/lib/logger';
import { List, Tooltip} from 'antd';
import { Typography } from 'antd';
import { component } from '@common/component';
import InformationCenter from './Informationcenter';


class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      labRules: [],
      trends :[],
      hoveredItem: null,
    };
  }
  componentDidMount() {
    const handleError = (error) => {
        console.error(error);
    };
    const handleException = (exception) => {
        console.error(exception);
    };

    axios.get('http://localhost:8080/web/lab_rules/list', {})
    .then((response) => {
      this.setState({ labRules: response.data.data });
    })
    .catch(handleError)
    .catch(handleException);

    axios.get('http://localhost:8080/web/lab_info/list', {})
    .then((res) => {
      this.setState({ trends: res.data.data});
    })
    .catch(handleError)
    .catch(handleException);
  }
    handleMouseOver = (news) => {
      this.setState({ hoveredItem: news });
    };

    handleMouseOut = () => {
      this.setState({ hoveredItem: null });
    };
  
  render() {
      const { labRules,trends } = this.state;
      const Text = Typography.Text;
      const { hoveredItem } = this.state;
    return (
      <>
        <body>
          <div className={'index'}>
            <div id="leftinfor">
              <div className={'fontcol'}>
                <span className={'fontcoll'}><RocketTwoTone />实验室动态</span>
                  <a> <Link to="/informationcenter" className={'fontcolr'}>
                    <Tooltip title="信息中心">
                      更多
                    </Tooltip>
                  </Link></a>   
              </div>
              <div className={'lion'}></div>
              <div className={'news-box'}>
                <List
                  size="small"
                  pagination={{
                    onChange: (page) => {
                    },
                    pageSize: 7,
                  }}
                  dataSource={trends.sort((a, b) => new Date(b.time) - new Date(a.time))}
                  renderItem={(news) => (
                    <List.Item
                      className={hoveredItem === news ? 'hover' : ''}
                      onMouseOver={() => this.handleMouseOver(news)}
                      onMouseOut={this.handleMouseOut}
                    >
                      <RightCircleTwoTone/>&nbsp;&nbsp;&nbsp;
                      <span > <Link to="/informationcenter" className='newsname'>{news.name}</Link></span>
                      <span className='newstime'>{news.time}</span>
                    </List.Item>
                  )}
                />
              </div>
            </div>
            <div id="rightrule">
              <div id="rigtop-nav">
                <div className={'fontnav'}>
                
                  <div className='mors'>
                    <span className={'font-box'}><ScheduleTwoTone  />规章制度</span>
                        <a> <Link to="/informationcenter" className={'more'}>
                          <Tooltip title="信息中心">
                            更多
                          </Tooltip>
                        </Link></a>              
                  </div>
                  <div className='rulelist-container'>
                    <div className='rulelist'>
                      {labRules.map((rule) => (
                        <a key={rule.id} style={{fontSize:"20px"}} >
                          <div className='rulename'>{rule.name} </div> 
                          <div style={{
                            textOverflow: 'ellipsis', 
                            overflow: 'hidden', 
                            whiteSpace: 'normal', 
                            display: 'inline-block', 
                            maxWidth: '800px', 
                            cursor: 'pointer',
                            fontSize:'15px',
                            lineHeight:'19px',
                            height:'60px',
                            paddingRight:'10px',
                            paddingLeft:'10px',
                            textIndent:'20px',
                            borderBottom:'2px dotted #bf930e',
                            }}
                          >
                            {rule.text}
                          </div> 
                        
                        </a>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <FooterPage />
        </body>
      </>
    )
  }
}
export default Home;